<template>
  <div>
    <HeaderTop>
      <template #logo>
        <span @clicl="reload" class="head_logo">云餐厅</span>
      </template>
    </HeaderTop>
    <nav class="city_nav">
      <div class="city_tips">
        <span>当前城市</span>
        <span>当定位不准时，请从列表中选取</span>
      </div>
      <router-link :to="'/city/'+guessCityId" class="guess_city">
        <span>{{guessCity}}</span>
        <svg class="arrow_right">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
        </svg>
      </router-link>
    </nav>
    <section class="hot_city_container">
      <h4 class="city_title">热门城市</h4>
      <ul class="citylistul clear">
        <router-link tag="li" v-for="item in hotCity" :to="'/city/'+item.id" :key="item.id">
          {{item.name}}
        </router-link>
      </ul>
    </section>
    <section class="group_city_container">
      <ul class="letter_classify">
        <li v-for="(value,key,index) in sortGroupCity" :key="key" class="letter_classify_li">
          <h4 class="city_title">{{key}}
            <span v-if="index == 0">（按字母排序）</span>
          </h4>
          <ul class="groupcity_name_container citylistul clear">
            <router-link tag="li" v-for="item in value" :key="item.id" :to="'/city/'+item.id" class="ellipsis">
              {{item.name}}
            </router-link>
          </ul>
        </li>
      </ul>
    </section>
  </div>
</template>

<script>
// import HeaderTop from '../../components/header/HeaderTop';
import {cityGuess, hotCity, groupcity} from '../../api/getData';
export default {
  name:'home',
  components:{
    // HeaderTop
  },
  data(){
    return {
      guessCity:'中国', // 当前城市
      guessCityId:'', // 当前城市Id
      hotCity:[], // 热门城市列表
      groupcity:{} // 所有城市列表
    }
  },
  computed:{
    sortGroupCity(){
      const sortobj={};
      for(let i=65;i<=90;i++){
        let obj=this.groupcity[String.fromCharCode(i)];
        if(obj){
          sortobj[String.fromCharCode(i)]=obj
        }
      }
      return sortobj;
    }
  },
  methods:{
    reload(){

    }
  },
  mounted(){
    cityGuess().then(res=>{
      this.guessCity=res.name;
      this.guessCityId=res.id;
    })
    hotCity().then(res=>{
      this.hotCity=res;
    })
    groupcity().then(res=>{
      this.groupcity=res;
    })
    
  }

}
</script>

<style lang="scss" scoped>
@import "~@styl/mixin.scss";
.head_logo {
  left: .4rem;
  font-weight: 400;
  @include sc(0.7rem,#fff);
  @include wh(2.3rem,0.7rem);
  @include ct;
}
.city_nav{
  padding-top: 2.35rem;
  border-top: 1px solid $bc;
  background: #fff;
  margin-bottom: 0.4rem;
  .city_tips{
    @include fj;
    line-height: 1.45rem;
    padding: 0 0.45rem;
    span:nth-of-type(1){
      @include sc(0.55rem,#666);
    }
    span:nth-of-type(2){
      font-weight: 900;
      @include sc(0.475rem,#9f9f9f);
    }
  }
  .guess_city{
    @include fj;
    align-items: center;
    border-top: 1px solid $bc;
    border-bottom: 1px solid $bc;
    height: 1.8rem;
    padding: 0 0.45rem;
    @include font(0.75rem,1.8rem);
    span{
      color: $blue;
    }
    .arrow_right{
      @include wh(.6rem, .6rem);
      fill: #999;
    }
  }
}
.hot_city_container{
  background: #fff;
  margin-bottom: 0.4rem;
}
.city_title{
  color: #666;
  font-weight: 400;
  text-indent:0.45rem;
  border-top: 2px solid $bc;
  border-bottom: 1px solid $bc;
  @include font(0.55rem, 1.45rem, "Helvetica Neue");
  span{
    @include sc(0.475rem, #999);
  }
}
.citylistul{
  li{
    float: left;
    color: $blue;
    text-align: center;
    border-bottom: 0.025rem solid $bc;
    border-right: 0.025rem solid $bc;
    @include wh(25%,1.75rem);
    @include font(0.6rem,1.75rem);
  }
  li:nth-of-type(4n){
    border-right: none;
  }
}

.letter_classify_li{
  background: #fff;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid $bc;
  .groupcity_name_container{
    li{
      color: #666;
    }
  }
}


</style>